<template>
	<div class="view-message">
		<mt-header class="chat-header" title="我的消息">
			<a @click="goBack" slot="left">
				<mt-button icon="back"></mt-button>
			</a>
			<!--<mt-button icon="" slot="right"></mt-button>-->
		</mt-header>
		<ul class="message-list">
			<li @click="goChat(item)" v-for="item,index in messageList" :keys="item.id" class="item flex">
				<div class="item-left">
					<img class="userImg" src="../../../../static/img/user/head-portrait.png" />
				</div>
				<div class="item-main flex-1">
					<h5 class="user-name">
						{{item.user_name}}
					</h5>
					<p class="message-content">
						{{item.message}}
					</p>
				</div>
				<div class="item-right">
					<span class="dateTime">
						{{item.time}}
					</span>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
	import util from '@/util/Util';
	import _date from '@/util/Date';
	import _sessionUser from '@/util/SessionUser';
	import _messageService from '@/service/messageService';

	export default {
		name: 'Message',
		data() {
			return {
				messageList: [],
			}
		},
		mounted() {
			let vm = this;
			_sessionUser.loadPage({
				scope: vm,
				exp: vm.userInfo,
				success: function() {
					vm.getAllMessageData();
				}
			});
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
			}),
		},
		methods: {
			goBack() {
				let vm = this;
				util.goBack(vm);
			},
			// 进入聊天
			goChat(row) {
				let vm = this;
				vm.$router.push({
					path: 'privateChat',
					query: {
						toUserId: row.from_user,
						toUserName: row.user_name
					}
				});
			},
			// 获取用户所有消息
			getAllMessageData() {
				let vm = this;
				let data;
				let resultData;
				let res = _messageService.getAllMessage({
					'userId': vm.userInfo.id,
					'success': function(response) {
						data = response.data.data;
						resultData = response.data;
						if(resultData.success) {
							if(data && data.length > 0) {
								data.forEach(function(value, index) {
									value.time = _date.dateFmt('MM-dd hh:mm', new Date(parseInt(value.time)));
								});
								vm.messageList = data;
							}
						} else {
							vm.$toast({
								message: resultData.message,
								duration: 1000
							});
							vm.messageList = [];
						}
						console.log('获取用户所有消息：' + resultData.message);
					}
				});
				return res;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.view-message {
		.chat-header {
			background-color: #f7f7f7;
			color: #404040;
		}
		.message-list {
			.item {
				padding: 10px 15px;
				border-bottom: 1px solid #e4e4e4;
			}
			.item-left {
				.userImg {
					position: relative;
					top: 5px;
					width: 38px;
					height: 38px;
					object-fit: cover;
					border-radius: 50%;
				}
			}
			.item-main {
				padding: 5px 9px;
				.user-name {
					width: 60%;
					font-size: 16px;
					font-weight: normal;
					color: #404040;
					@include text-overflow(1);
				}
				.message-content {
					width: 100%;
					font-size: 14px;
					color: #a6a6a6;
					@include text-overflow(1);
				}
			}
			.item-right {
				.dateTime {
					position: relative;
					top: 28px;
					width: 70px;
					display: inline-block;
					font-size: 12px;
					color: #b4b4b4;
					@include text-overflow(1);
				}
			}
		}
	}
</style>